import { Button, Space, TabPane, Tabs } from 'ant-design-vue'
import { omit } from 'lodash-es'
import moment from 'moment'
import { defineComponent, ref } from 'vue'
import { useRouter } from 'vue-router'

import { marketingApi } from '@/apis'
import type { GroupListItem } from '@/apis/marketingTypes'
import { type ProTableProps, type ProTableRef, ProTable } from '@/components'
import { TABLE_FORMAT, TABLE_ITEM_RENDER, TABLE_RENDERER } from '@/constants'

import {
  activityStatusMap,
  activityStatusOptions,
  groupStatusMap,
  groupStatusOptions
} from '../constants'

export default defineComponent({
  name: 'GroupList',
  setup() {
    const tableRef = ref({} as ProTableRef)
    const activeStatus = ref('')
    const tableConfig = ref({
      fixedHeight: true,
      fixedExtraHeight: 158,
      options: {
        align: 'center',
        border: true,
        formConfig: {
          items: [
            {
              title: '活动名称',
              field: 'name',
              itemRender: {
                name: TABLE_ITEM_RENDER.AInput,
                props: {
                  placeholder: '请输入'
                }
              }
            },
            {
              title: '活动状态',
              field: 'activityStatus',
              itemRender: {
                name: TABLE_ITEM_RENDER.ASelect,
                options: activityStatusOptions,
                props: {
                  placeholder: '请选择'
                }
              }
            },
            {
              title: '活动时间',
              field: 'lastDate',
              itemRender: {
                name: TABLE_RENDERER.FormItemDate,
                props: {
                  type: 'range',
                  placeholder: ['开始时间', '结束时间'],
                  valueFormat: 'x',
                  showTime: {
                    defaultValue: [
                      moment('00:00:00', 'HH:mm:ss'),
                      moment('23:59:59', 'HH:mm:ss')
                    ]
                  },
                  keys: ['beginTime', 'endTime']
                }
              }
            },
            {
              itemRender: {
                name: TABLE_RENDERER.FormItemBtns
              }
            }
          ]
        },
        columnConfig: {
          minWidth: 100
        },
        columns: [
          {
            title: '活动名称',
            field: 'activityName'
          },
          {
            title: '活动ID',
            field: 'activityId'
          },
          {
            title: '活动状态',
            field: 'activityStatus',
            formatter: ({ cellValue }) => {
              return activityStatusMap[cellValue]
            }
          },
          {
            title: '拼团商品',
            field: 'couponName'
          },
          {
            title: '团队编号',
            field: 'groupNo'
          },
          {
            title: '团长',
            field: 'sponsorName'
          },
          {
            title: '手机号',
            field: 'mobile'
          },
          {
            title: '成团数',
            field: 'groupNumber'
          },
          {
            title: '参与人数',
            field: 'participation'
          },
          {
            title: '开团时间',
            field: 'startTime',
            minWidth: 140,
            formatter: TABLE_FORMAT.Date
          },
          {
            title: '完成时间',
            field: 'finishedTime',
            minWidth: 140,
            formatter: TABLE_FORMAT.Date
          },
          {
            title: '拼团状态',
            field: 'groupStatus',
            formatter: ({ cellValue }) => {
              // 拼团中支付成功
              if (cellValue === '4') {
                cellValue = 1
              }
              return groupStatusMap[cellValue]
            }
          },
          {
            title: '操作',
            width: 100,
            fixed: 'right',
            slots: {
              default: 'operation'
            }
          }
        ],
        pagerConfig: {
          pageSize: 15
        },
        proxyConfig: {
          seq: true,
          form: true,
          props: {
            result: 'dataList',
            total: 'page.totalCount'
          },
          ajax: {
            query: async ({ page, form }) => {
              form = omit(form, ['lastDate'])
              console.log('1')

              const data = await marketingApi.getGroupList({
                pageParameter: {
                  pageSize: page.pageSize,
                  currentPage: page.currentPage
                },
                groupStatus: activeStatus.value,
                ...form
              })
              return data
            }
          }
        }
      },
      events: {
        onFormReset: () => {
          activeStatus.value = ''
        }
      }
    } as ProTableProps)

    const router = useRouter()

    /** 拼团状态变更 */
    function handleChangeStatus(value: string) {
      tableRef.value.table.commitProxy('query', value)
    }

    /** 查看详情 */
    function handleView(item: GroupListItem) {
      router.push({
        name: 'GroupDetail',
        query: {
          id: item.id
        }
      })
    }

    return {
      tableRef,
      tableConfig,
      activeStatus,
      statusOptions: groupStatusOptions,
      handleChangeStatus,
      handleView
    }
  },
  render() {
    return (
      <div>
        <Tabs
          v-model:activeKey={this.activeStatus}
          type="card"
          onChange={this.handleChangeStatus}
        >
          {this.statusOptions.map(v => (
            <TabPane key={v.value} tab={v.label}></TabPane>
          ))}
        </Tabs>
        <ProTable
          ref="tableRef"
          v-slots={{
            operation: ({ row }: { row: GroupListItem }) => (
              <Space>
                <Button
                  type="link"
                  size="small"
                  onClick={() => this.handleView(row)}
                >
                  详情
                </Button>
              </Space>
            )
          }}
          {...this.tableConfig}
        />
      </div>
    )
  }
})
